<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/base_animate.css" rel="stylesheet" type="text/css">

    <style>
        *{margin: 0; padding: 0;}
        .page{
            width: 100%;
            position: fixed;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        .pages{
            width: 100%;
            height: 700px;
            position: relative;
        }

        .page ul{
            width: 16px;
            height: 176px;
            position: fixed;
            right: 20px;
            top: 50%;
            margin-top: -88px;
            list-style-type: none;
        }
        .page ul li{
            width: 13px;
            height: 13px;
            margin: 16px 0;
            border-radius: 50%;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .page ul li.active{
            background-color: #666;
        }
        .page .pages .main_con{
            width: 900px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -200px 0 0 -450px;
        }
        .page .main_con .left_img{
            width: 363px;
            height: 400px;
            float: left;
        }
        .page .main_con .right_info{
            width: 500px;
            height: 300px;
            float: right;
            margin-top: 50px;
            font-family: 'Microsoft Yahei';
            font-size: 20px;
            line-height: 50px;
            color: #666;
            text-indent: 2em;
            text-align: justify;  /*两端对齐*/
        }
        .main_con .right_img {
            width: 522px;
            height: 400px;
            float: right;
        }
        .main_con .left_info{
            width: 350px;
            height: 300px;
            /*margin-top: 50px;*/
            float: left;
            font-family: 'Microsoft Yahei';
            font-size: 20px;
            line-height: 50px;
            color: #666;
            text-indent: 2em;
            text-align: justify;
        }
        .main_con .center_img {
            width: 611px;
            height: 337px;
            position: absolute;
            left: 50%;
            margin-left: -305px;
        }
        .page img{
            width: 400px;
            height:300px;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="pages moving page1">
        <div class="main_con">
            <div class="left_img animated slideInLeft">
                <img src="img/pic-6.jpg" alt="">
            </div>
            <div class="right_info animated slideInRight">
              捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮捂死你个哈麻皮
            </div>
        </div>
    </div>
    <div class="pages page2">
        <div class="main_con">
            <div class="right_img animated slideInUp"><img src="img/pic-7.jpg"></div>
            <div class="left_info animated slideInDown ">
                生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）生病（啊楸）
            </div>
        </div>
    </div>
    <div class="pages page3">
        <div class="main_con">
            <div class="left_img animated bounceInRight"><img src="img/pic-8.jpg"></div>
            <div class="right_info animated bounceInLeft">
                啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得啪，给你惯得
            </div>

        </div>
    </div>
    <div class="pages page4">
        <div class="main_con">
            <div class="left_img animated slideInLeft"><img src="img/pic-9.jpg"></div>
            <div class="right_info animated slideInRight">
               丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的丢掉的不听话的
            </div>
        </div>
    </div>
    <div class="pages page5">
        <div class="main_con">
            <div class="center_img animated zoomInDown"><img src="img/pic-10.jpg"></div>

        </div>
    </div>

    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
    $(function () {
        //添加动画效果

        //获取当前可视区域的高度
        $h = $(window).height();
        //获取到pages盒子，将获取到的可视区域的高度赋给pages这个盒子的高度
        $(".page .pages").css("height",$h);
        //初始化一个变量，作用是充当元素的下标
        var num = 0;
        //初始化一个变量，用来保存定时器
        var timer = null;
        //给窗口添加滚轮事件
        $(window).mousewheel(function (e,dat) {
            clearTimeout(timer)
            timer = setTimeout(function () {
                if(dat <= -1){
                    num++;
                }else{
                    num--;
                }
                if(num > $(".pages").length - 1){
                    num = 4;
                }else  if(num < 0){
                    num = 0
                }
                //调用动画效果
                $(".pages").eq(num).addClass("moving").siblings().removeClass("moving");
                //设置滚动距离
                $(".page").animate({top : -$h * num},500);
                //设置滚动添加的类名
                $("ul li").eq(num).addClass("active").siblings().removeClass("active");
            },500)
        })

        $("ul li").click(function () {
            var _index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".page").animate({top : -$h * _index},500);
            //调用动画效果
            $(".pages").eq(_index).addClass("moving").siblings().removeClass("moving");
        })


    })
</script>